 <template>
  <div>
    <!-- 最大的盒子 -->
    <div class="warp">
      <!-- 上面的盒子 -->
      <div class="heard">
        <ul class="u1 fl">
          <li><a href="">新闻</a></li>
          <li><a href="">hao123</a></li>
          <li><a href="">地图</a></li>
          <li><a href="">直播</a></li>
          <li><a href="">视频</a></li>
          <li><a href="">贴吧</a></li>
          <li><a href="">学术</a></li>
          <li><a href="">更多</a></li>
        </ul>
        <p class="p1 fr">
          <a href="" class="s1 fl">齐齐哈尔</a>
          <img
            src="https://dss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/img/weather/icons/a0.png"
            alt=""
            width="26px"
            height="24px"
            class="i1 fl"
          />
          <a href="" class="a1 fl">15℃</a>
          <a href="" class="a2 fl">良</a>
          <a href="" class="a3 fl">设置</a>
          <a href="" class="a4 fl"></a>
          <a href="" class="a5 fr">MRSL丶流年</a>
        </p>
      </div>
      <div class="top banxin">
        <Data
          :da="arr"
          :t="bool"
          :ind="ind"
          :msg="msg"
          @show="sw"
          @blur="bl"
          @ove="ov"
          @out="ou"
          @up="up"
          @dw="dw"
         ></Data>
      </div>
    </div>
  </div>
</template>
 <script>
import Data from "./baiduxq.vue";
export default {
  components: {
    Data,
  },
  data() {
    return {
      ind: 0,
      arr: [
        {
          name: "有人从喀布尔起飞的美运输机上掉落？华春莹：震惊、悲伤",
          boo: false,
        },
        { name: "腾讯视频崩了 官方：用户观看热情高涨 紧急扩容", boo: false },
        {
          name: "虚惊一场？许家印卸任恒大地产董事长，发生了什么？最新回应来了",
          boo: false,
        },
        { name: "神舟十二号航天员将第二次出舱活动", boo: false },
      ],
      msg: "",
      arrnew: [],
      bool: false,
    };
  },
  methods: {
    sw() {
      this.bool = true;
    },
    bl() {
      this.bool = false;
      this.msg = "";
    },
    ov(item) {
      item.boo = true;
      this.ind = this.arr.length + 1;
      this.msg = item.name;
    },
    ou(item) {
      item.boo = false;
      this.ind = this.arr.length + 1;
    },
    up() {
      if (this.ind > 0) {
        this.ind--;
      } else {
        this.ind = this.arr.length - 1;
      }
      this.msg = this.arr[this.ind].name;
      this.arr.forEach((item) => {
        item.boo = false;
      });
    },
    dw() {
      if (this.ind < this.arr.length - 1) {
        this.ind++;
        this.msg = this.arr[this.ind].name;
      } else {
        this.ind = 0;
      }
      this.arr.forEach((item) => {
        item.boo = false;
      });
    },
    ove(i) {
      i.boo = true;
      this.ind = this.arr.length + 1;
    },
    out(i) {
      i.boo = false;
      this.ind = this.arr.length + 1;
    },
  },
  computed: {},
};
</script>
 <style lang='css' spend>
* {
  margin: 0;
  padding: 0;
}
ul,
li {
  list-style: none;
}
a {
  text-decoration: none;
}
.fl {
  float: left;
}
.fr {
  float: right;
}
.active {
  background: #cccc;
}
.banxin {
  width: 1302px;
}
.warp {
  width: 100%;
  height: 993px;
}
.heard {
  width: 100%;
  height: 80px;
  margin: 0 auto;
  line-height: 80px;
}
.u1 li:nth-of-type(1) {
  margin-left: 30px;
}
.u1 li {
  float: left;
  margin-right: 30px;
}
.u1 li a {
  color: #000;
  font-size: 14px;
}
.u1 li a:hover {
  color: blue;
}
.p1 {
  width: 424px;
  height: 44px;

  margin-right: 25px;
  margin-top: 20px;
  line-height: 44px;
}
.s1 {
  font-size: 15px;
  color: #000;
}
.xq {
  position: absolute;
  width: 688px;
  height: 500px;
  border: 1px solid #000;
  top: 198px;
  left: 238px;
}
.xq li {
  height: 50px;
  margin-top: 20px;
  line-height: 50px;
}
.i1 {
  margin-left: 15px;
  margin-top: 10px;
}
.a1 {
  margin-left: 9px;
  color: #000;
  font-size: 13px;
}
.a2 {
  display: block;
  width: 20px;
  height: 20px;
  background: #4e71f2;
  border-radius: 5px;
  color: #fff;
  text-align: center;
  line-height: 20px;
  font-size: 13px;
  margin-left: 12px;
  margin-top: 10px;
}
.a3 {
  margin-left: 40px;
  color: #000;
}
.a4 {
  display: block;
  width: 40px;
  height: 40px;
  border: 1px solid #4e71f2;
  border-radius: 20px;
  margin-left: 40px;
  /* background:url(bd.img/9cab4d52534cd8bcc1f7c4eaaf3a.jpg) center center no-repeat; */
}
.a5 {
  color: #000;
  margin-right: 3px;
}
.top {
  height: 346px;
  margin: 0px auto;
  position: relative;
}
.logo {
  width: 825px;
  height: 200px;
  position: relative;
  margin-left: 238px;
  margin-top: 20px;
  text-align: center;
}
.ssk {
  height: 56px;
  width: 825px;
}
.ssk input {
  width: 688px;
  height: 56px;
  margin-top: 16px;
  border-radius: 10px 0px 0px 10px;
  border: 1px solid #4e71f2;
  outline: none;
}
.a6 {
  display: block;
  width: 135px;
  height: 58px;
  background: #4e6ef2;
  margin-top: 16px;
  line-height: 58px;
  text-align: center;
  color: #fff;
  border-radius: 0px 10px 10px 0px;
}
.a7 {
  display: block;
  width: 26px;
  height: 22px;
  position: absolute;
  /* background: url(bd.img/nicon-10750f3f7d.png) -2px -51px no-repeat; */
  right: 155px;
  top: 160px;
}
.bottom {
  height: 565px;

  margin: 0px auto;
}
.a8 a {
  color: #9195a3;
}
.a8 a:nth-of-type(2) {
  margin-left: 40px;
  margin-right: 40px;
  color: #000;
  padding-bottom: 8px;
  border-bottom: 2px solid #4e6ef2;
}
.a8 a:hover {
  color: #4e6ef2;
}
.a9 {
  font-size: 24px;
  color: #000;
  margin-top: 20px;
}
.left {
  width: 690px;
  height: 120px;
  float: left;
}
.a10 {
  margin-top: 10px;
}
.a10 a {
  color: #9195a3;
  font-size: 14px;
}
.a10 a:nth-of-type(2) {
  margin-left: 14px;
  margin-right: 10px;
}
.bottom1 {
  width: 700px;
  height: 342px;

  margin-top: 40px;
  float: left;
}
.bottom1 dl {
  width: 700px;
  height: 154px;
}

.bottom1 dl:nth-of-type(2) {
  margin-top: 30px;
}
.bottom1 dl dt:nth-of-type(1) img {
  border-radius: 10px;
}
.bottom1 dl dd:nth-of-type(1) p {
  font-size: 22px;
  display: block;
  width: 400px;
  margin-right: 40px;
}
.bottom1 dl dd:nth-of-type(1) a {
  color: #000;
}
.i8 a {
  font-size: 13px;
  margin-top: 80px;
  float: left;
}
.i8 a:nth-of-type(2) {
  margin-left: 20px;
  margin-right: 20px;
}
.bottom1 dl dt:nth-of-type(2) img {
  border-radius: 10px;
}
.bottom1 dd .i8 .i9 {
  color: red;
}
.right {
  width: 500px;
  height: 420px;

  margin-bottom: 40px;
}
.left11 {
  float: left;
  width: 700px;
  height: 490px;
}
.i9 {
  height: 30px;
}
.i9 a:nth-of-type(1) {
  color: #000;
  font-size: 15px;
}
.i9 a:nth-of-type(2) {
  color: #9195a3;
  line-height: 20px;
  font-size: 14px;
}
.i10 {
  vertical-align: middle;
}
.u30 {
  margin-top: 23px;
}
.u30 li {
  width: 500px;
  height: 20px;

  margin-top: 15px;
}
.u30 li span {
  float: left;
}
.u30 li a {
  float: left;
  margin-left: 20px;
  color: #000;
}
.u30 li .ss2 {
  float: right;
}
.u30 li .i18 {
  width: 20px;
  height: 20px;
  background: #ff9812;
  color: #fff;
  text-align: center;
  border-radius: 5px;
  line-height: 20px;
  margin-left: 5px;
  font-size: 14px;
}
.u30 .u31 {
  color: #fe8391;
}
.u30 .u32 {
  color: #ffa970;
}
.u30 .u33 {
  color: #fbbd46;
}
.u30 li:nth-of-type(10) a {
  margin-left: 8px;
}
.pp1 {
  width: 1130px;
  height: 20px;
  margin: 0 auto;
  line-height: 20px;
}
.pp1 a {
  font-size: 13px;
  color: #9195a3;
  margin-right: 12px;
}
</style>